<template>
  <div>
    <div class="py-1 px-1 bg-white d-scroll listInner">
      <custom-title :is-line="true" title="基本信息" />
      <div v-for="(item, index) in descList" :key="index">
        <custom-details-item one-color :label="item.label" :value="item.value" :icon="item.icon" />
      </div>
      <template>
        <custom-title :is-line="true" title="设备设施升级/改造情况" />
        <div class="common_list" style="padding: 0">
          <template v-if="listData && listData.length>0">
            <div v-for="(item, index) in listData" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">{{ item['projectName'] }}</div>
                  <ul>
                    <li v-for="(it,ind) in fieldList" :key="index + '' + ind">
                      <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="it.icon" />
                      <div class="label">{{ it.label }}：</div>
                      <div v-if="it.field !== 'shareAttachVos'" class="value">{{ item[it.field] }}</div>
                      <div v-else class="value">
                        <el-link type="primary" @click="openAttachPopUp(item[it.field])">查看</el-link>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </template>
          <el-empty v-else />
        </div>
        <custom-title :is-line="true" title="设施维修情况" />
        <div class="common_list" style="padding: 0">
          <template v-if="deviceListData && deviceListData.length>0">
            <div v-for="(item, index) in deviceListData" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">{{ item.name }}</div>
                  <ul>
                    <li v-for="(it,ind) in deviceFieldList" :key="index + '' + ind">
                      <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="it.icon" />
                      <div class="label">{{ it.label }}：</div>
                      <div class="value">{{ item[it.field] }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </template>
          <el-empty v-else />
        </div>
        <custom-title :is-line="true" title="月度巡检记录" />
        <div class="common_list" style="padding: 0">
          <template v-if="monthRecordsList && monthRecordsList.length>0">
            <div v-for="(item, index) in monthRecordsList" :key="index" class="list_item">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">{{ item.name }}</div>
                  <ul>
                    <li v-for="(it,ind) in monthRecordsFieldList" :key="index + '' + ind">
                      <i :class="'iconfont c-text-color' + ((ind % 7) + 1)" v-html="it.icon" />
                      <div class="label">{{ it.label }}：</div>
                      <div class="value">
                        <div v-if="it.field !== 'shareAttachVos'" class="value">{{ item[it.field] }}</div>
                        <div v-else class="value">
                          <el-link type="primary" @click="openAttachPopUp(item[it.field])">查看</el-link>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </template>
          <el-empty v-else />
        </div>
      </template>
    </div>
    <attachPopUp ref="attachPopUp" />
  </div>
</template>

<script>
import { HbDeviceInfo } from '@/api/commonPage/facility'
import commonList from '@/assets/mixin/commonList'

export default {
  mixins: [commonList],
  data() {
    return {
      companyName: '',
      active: '',
      current: '',
      companyId: '',
      descList: [
        { icon: '&#xe790;', label: '企业名称', value: '', fieldName: 'companyName', type: 'all' },
        { icon: '&#xe87e;', label: '行政区划', value: '', fieldName: 'registeAddress', type: 'all' },
        { icon: '&#xe629;', label: '设施编号', value: '', fieldName: 'deviceCode', type: 'all' },
        { icon: '&#xe62c;', label: '设施名称', value: '', fieldName: 'deviceName', type: 'all' },
        { icon: '&#xe791;', label: '设施类型', value: '', fieldName: 'deviceType', type: 'all' },
        { icon: '&#xe6a2;', label: '设施状态', value: '', fieldName: 'active', type: 'all' },
        { icon: '&#xe64e;', label: '规格型号', value: '', fieldName: 'modelNum', type: 'all' },
        { icon: '&#xe8d5;', label: '设计使用年限', value: '', fieldName: 'planUseYear', type: 'all' },
        { icon: '&#xe87e;', label: '设备使用地点', value: '', fieldName: 'deviceAddr', type: 'all' },
        { icon: '&#xe617;', label: '投入使用日期', value: '', fieldName: 'putUseTime', type: 'all' },
        { icon: '&#xe700;', label: '环保管理员', value: '', fieldName: 'envHead', type: 'all' },
        { icon: '&#xe685;', label: '停用/注销时间', value: '', fieldName: 'stopTime', type: 'all' }
      ],
      listData: [
        { name: '高级注册安全工程师', type: '职称证书', level: '高级', item1: '化工安全', item2: '2020-06-06', item3: '2020-06-06', item4: '2020-06-06', item5: false },
        { name: '高级注册安全工程师1', type: '职称证书', level: '高级', item1: '化工安全', item2: '2020-06-06', item3: '2020-06-06', item4: '2020-06-06', item5: true }
      ],
      deviceListData: [
        { name: '高级注册安全工程师', type: '职称证书', level: '高级', item1: '化工安全', item2: '2020-06-06', item3: '2020-06-06', item4: '2020-06-06', item5: false },
        { name: '高级注册安全工程师1', type: '职称证书', level: '高级', item1: '化工安全', item2: '2020-06-06', item3: '2020-06-06', item4: '2020-06-06', item5: true }
      ],
      monthRecordsList: [],
      deviceFieldList: [
        { icon: '&#xe617;', field: 'repairTime', label: '维修日期' },
        { icon: '&#xe668;', field: 'repairContent', label: '维修内容' },
        { icon: '&#xe790;', field: 'repairUnit', label: '维修机构' }
      ],
      fieldList: [
        { icon: '&#xe6b6;', field: 'projectName', label: '项目名称' },
        { icon: '&#xe69e;', field: 'primaryCraft', label: '主要工艺' },
        { icon: '&#xe677;', field: 'shareAttachVos', label: '附件' }
      ],
      monthRecordsFieldList: [
        { icon: '&#xe6b6;', field: 'checkTime', label: '巡检日期' },
        { icon: '&#xe69e;', field: 'checkContent', label: '巡检内容' },
        { icon: '&#xe677;', field: 'shareAttachVos', label: '巡检报告' }
      ]
    }
  },
  created() {
    const { current, companyId, active } = this.$route.query
    this.companyId = companyId || ''
    this.current = current || ''
    this.active = active || ''
  },
  mounted() {
    this.HbDeviceInfo()
  },
  methods: {
    // 基本信息
    async HbDeviceInfo() {
      const { data, status } = await HbDeviceInfo({
        deviceId: this.$route.query.deviceId
      })
      if (status === 0 && data) {
        // 基本信息
        this.descList.forEach(v => {
          if (data[v.fieldName]) {
            if (v.fieldName === 'planUseYear') {
              v.value = data[v.fieldName] + '年'
            } else {
              v.value = data[v.fieldName]
            }
          } else {
            v.value = ''
          }
        })
        //   设备设施升级、改造情况
        this.listData = data.deviceTransformRecordListVOList
        console.log('this.listData', this.listData)
        //   设备维修情况
        this.deviceListData = data.deviceRepairRecordListVOS
        // 月度巡查记录
        this.monthRecordsList = data.deviceCheckRecordListVOS
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.olMap {
  width: 100%;
  height: 350px;
}
</style>
